<template >
<view style="background-color: #f6fafd;">	
	<view style="display: flex;align-items: center;  margin: 10rpx 10rpx;">
		<view class="search-bar" @click="toSignSeach">
			<image class="search-icon" src="/static/u2326.png" mode=""></image>
			<input type="text" placeholder="搜索机构/医生" placeholder-style="color:#999" v-model="input"@input="onInput"  >
			</input>
		</view>
		<view class="search-button">
			<text style="width: 60rpx;
		height: 40rpx;" @click="toOrganization">取消</text>
		</view>
	</view>
	<view v-if="organizationData.rows .length> 0 || SearchDoctor.rows.length > 0" >
		<text style="font-style: normal;
			font-size: 38rpx; margin-bottom: 40rpx; margin-left: 20rpx;" v-if="organizationData.rows.length>0">机构</text>
		<view v-for="item in organizationData.rows" :key='item._id' class="search-box" @click="toSignPath(item._id)">
			<image :src="item.image" mode=""class="search-icon-a"></image>
			<view class="hostpital-box-span">
				<text>{{item.name}}</text>
				<view class="hostpital-span">距离您3.6km</view>
			</view>
		</view>
		
		<text style="font-style: normal;
			font-size: 38rpx; margin-bottom: 40rpx;  margin-left: 20rpx;" v-if=" SearchDoctor.rows.length>0">医生</text>
		<view v-for="item in SearchDoctor.rows" :key="item._id" class="search-box">
			<image :src="item.avatar" mode=""class="search-icon-a" style="width: 120rpx; height: 120rpx; flex-shrink: 0;"></image>
			<view class="hostpital-box-span" style="margin-left: 100rpx;">
				<view style="display: flex; align-items: center width: 216rpx; height: 60rpx;;">
					<text style=" white-space: nowrap ;margin-right: 20rpx; ">{{item.name}}</text>
					<text class="hostpital-span">{{item.roleId.name}}</text>
				</view>
				<view style="display: flex; justify-content: space-between; align-items: flex-start;">
					<view class="hostpital-span">
						签约人数:<text style="color: #2984F8">{{item.signNumber}}</text>
						</view>
						<view style="width: 120rpx; height: 60rpx; background-color:#2984F8  ; border-radius: 40rpx; flex-shrink: 0; text-align: center;  line-height: 60rpx; margin-bottom: 40rpx;">
							<text style="width: 40rpx; height: 40rpx; color: #FFFFFF;" @click="showMenu = true">签约</text>
							  <view 
							      class="action-sheet" 
							      v-if="showMenu"
							    >
							      <view class="menu-item" @click="handleSelect('已建档')">已建档</view>
							      <view class="menu-item" @click="handleSelect('未建档')">未建档</view>
							    </view>
						</view>
				</view>
			</view>
			
		</view>

	</view>
	<view v-else>
		<image src="/static/437c9a6babd7b080d56745c93bf9b6c9.png" mode=""></image>
	</view>
</view>
</template>

<script setup>

	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';
	import {
		getOrganizationsSeachApi
	} from '../../../api/organization';
import form from '../../../uni_modules/uview-plus/components/u-form/form';
import { getServiceDoctorsApi } from '../../../api/sign';
	onLoad(() => {
		getOrganizationsSeach()
		getServiceDoctors()
	})
	const showMenu = ref(false);
	const onInput=()=>{
		getOrganizationsSeach()
		getServiceDoctors()
		
	}
	const organizationData = reactive({
		rows: [],
		total: 0
	});
	const SearchDoctor=reactive({
		rows: [],
		total: 0
	})
	const input = ref('')

	function toOrganization() {
		uni.reLaunch({
			url: '/SignPackage/pages/organization/organization'
		})
	}
function toSignPath(_id) {
		uni.navigateTo({
			url: '/SignPackage/pages/sign/sign?_id=' + _id
		})
	}
	function handleSelect(type) {
	  
	  if (type === '已建档') {
		  showMenu.value = false;
	    console.log('选择了已建档');
	  } else {
		  showMenu.value = false;
	    console.log('选择了未建档');
	  }
	}
	function getOrganizationsSeach() {
		getOrganizationsSeachApi({
				value:input.value
			})
			.then(res => {
				if (res.code == 200) {
					organizationData.rows = res.data.rows;
					organizationData.total = res.data.total;
				}
			})
	}
	function getServiceDoctors (){
		getServiceDoctorsApi({
				name:input.value
		})
		.then(res => {
			if (res.code == 200) {
				SearchDoctor.rows = res.data.rows;
				SearchDoctor.total = res.data.total;
			}
		})
	}
</script>

<style>
	.search-bar {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin: 20rpx;
		border: 1px solid #eee;
		width: 602rpx;
		height: 52rpx;
		margin: 20rpx auto;
	}

	.search-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
		
	.search-box{
		width: 700rpx;
		height: 228rpx;
		border: 1px solid #eee;
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 1);
		margin: 40rpx 20rpx
		;
	}
	.search-button {
		color: #999999;
	}
	.search-icon-a{
		width: 280rpx;
		height: 280rpx;
	}
	.hostpital-span{
		margin-top: 20rpx;
		font-size: 22rpx;
		color: #999999;
		  white-space: nowrap;      /* 禁止换行 */
		  overflow: hidden;         /* 超出部分隐藏 */
		  text-overflow: ellipsis;  /* 显示省略号 */
	}
	.hostpital-box-span{
		width: 420rpx;
		text-align: left;
		height: 180rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

	}
	.menu-item {
		width: 88rpx;
		height: 48rpx;
	  background-color: #999999;
	  text-align: center;
	  font-size: 12rpx;
	  margin: 5rpx;
	}
		
	.action-sheet{
		  width: 126rpx;
		      background: #FFF none repeat scroll 0% 0%;
		  z-index: 1001;
		  border-radius: 16rpx 16rpx 0 0;
		  padding: 6rpx 16rpx 6px 16rpx;
	}
</style>